<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>08_条件渲染</title>
</head>

<body>
  <!--
  1. 条件渲染指令
    v-if / v-else-if / v-else
    
    v-show

  2. 区别
    v-if    隐藏时，移除DOM元素
    v-show  隐藏时，控制style的display:none

  3. 比较v-if与v-show
    如果需要频繁切换 v-show 较好
      v-if操作DOM元素比v-show操作样式性能开销大，所以v-show性能开销小，性能更好
    如果不频繁切换，只切换一次。 v-if 较好
      内存占用少，页面将来重排重绘少计算一个元素也更好

  4. 什么会考虑使用 v-if与v-show ？
    当元素需要显示&隐藏切换时（条件渲染）
  -->

  <div id="app">
    <p v-if="isShow">静哥真帅</p>
    <!-- <p v-show="isShow">静哥真帅</p> -->
    <button @click="update">按钮</button>

    <p v-if="a">aaa</p>
    <p v-else-if="b">bbb</p>
    <p v-if="c">ccc</p>
    <p v-else="d">ddd</p>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    /*
      react页面想要有变化，如何更新？
        定义 state
        调用 this.setState 去更新 - 不建议直接修改数据
      
      vue页面想要有变化，如何更新？
        定义 data
        直接更新数据，对应用户界面也会更新 - 直接修改数据
    */
    new Vue({
      el: '#app',
      data: {
        isShow: true,
        a: true,
        b: true,
        c: true,
        d: true
      },
      methods: {
        update() {
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>

</html>